<template>
    <div class="acadamy02">
        <div class="title">
            <h1>教师管理 &gt; 教师列表 </h1>
        </div>
        <div class="search">
            <el-input v-model="keyword" class="search-input" placeholder="请输入">
                <template #prefix>
                    <el-icon class="input__icon"><search /></el-icon>
                </template>
            </el-input>
            <div class="select">
                <el-select v-model="SubjectValue" 
                class="search-select"
                placeholder="请选择科目"
                size="small">
                    <el-option
                    v-for="item in SubjecOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    />
                </el-select>
                <el-select v-model="GradeValue" 
                class="search-select"
                placeholder="请选择年级"
                size="small">
                    <el-option
                    v-for="item in GradeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    />
                </el-select>
            </div>
        </div>
        <div class="list">
            <el-table  
            :data="teacherData"
            border 
            style="width: 100%"
            height="600px"
            stripe=true
            type=index
            >
                <el-table-column prop="id" label="#" width='60px'/>
                <el-table-column prop="account" label="账号" />
                <el-table-column prop="pwd" label="密码" />
                <el-table-column prop="name" label="姓名" />
                <el-table-column prop="subject" label="科目" sortable/>
                <el-table-column prop="grade" label="所带年级"/>
                <el-table-column prop="class" label="所带班级"/>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-popconfirm
                            confirm-button-text="确定"
                            cancel-button-text="不,谢谢"
                            :icon="InfoFilled"
                            icon-color="red"
                            title="你真的要删除这个用户吗?"
                            @confirm="confirmDelelte(scope.row._id)"
                        >
                            <template #reference>
                                <el-button type="danger" :icon="DeleteFilled" plain  >删除</el-button>
                            </template>
                        </el-popconfirm>
                        
                        <el-button type="success"  
                        @click="showUpdateDialog(scope.row)" 
                        :icon="Edit"
                        plain 
                        >编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog
            v-model="updateVisible"
            title="修改教师信息"
            width="30%"
            :before-close="updateClose"
        >
            <el-form
                    :model="form"
                    :rules="rules"
                    label-width="120px"
                    class="demo-ruleForm"
                    ref="myfrom"
                >
                    <el-form-item label="账号" 
                    
                    prop="account">
                    <el-input 
                    v-model="form.account" 
                    type="userword"
                    clearable
                    placeholder="请输入教师账号"
                        :prefix-icon="User"
                        />
                    </el-form-item>
                    <el-form-item label="名字" prop="name">
                    <el-input 
                    v-model="form.name" 
                    type="text"
                    clearable
                    placeholder="请输入姓名"
                        :prefix-icon="User"
                        />
                    </el-form-item>
                    
                        <el-form-item label="密码" prop="paw">
                        <el-input
                            v-model="form.paw"
                            type="password"
                            clearable
                            placeholder="请输入密码"
                            :prefix-icon="Lock"
                            show-password
                            @blur="checkdbpassword"
                        />
                        </el-form-item>
                    <el-form-item label="确认密码" prop="dbpassword">
                    <el-input
                        v-model="form.dbpassword"
                        type="password"
                        clearable
                        placeholder="请再次输入密码"
                        :prefix-icon="Lock"
                        show-password
                    
                    />
                    </el-form-item>
                    <el-form-item label="科目" prop="kemu">
                        <div class="radio">
                                <el-radio-group 
                                fill="#ff6700"
                                @change="mustRedio"
                                v-model="radio1" size="small">
                                <el-radio-button  label="语文" />
                                <el-radio-button label="数学" />
                                <el-radio-button label="外语" />
                                </el-radio-group>
                        </div>
                    </el-form-item>
                    <el-form-item label="所带班级" prop="classInfo">
                        <div class="selects">
                                <el-select v-model="select1" @change="mustSelsct1" placeholder="请选择年级">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                />
                            </el-select>
                            <el-select v-model="select2" @change="mustSelsct2" placeholder="请选择班级">
                                <el-option
                                v-for="item in classes"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                />
                            </el-select>
                        </div>
                    </el-form-item>
                </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="updateClose">取消</el-button>
                    <el-button type="warning" @click="submitUpdateForm"
                    >修改</el-button
                    >
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script>
import { ref,onMounted, reactive ,toRefs} from 'vue'
import { ElMessageBox } from 'element-plus'
import {ajax} from "@/api"
import { Search,InfoFilled,DeleteFilled,Edit } from '@element-plus/icons-vue'
import {useStore} from 'vuex'
export default {
    components:{
        Search
    },
    
    setup(props) {
        const myfrom=ref()
        const radio1 = ref()
        const select1 = ref()
        const select2 = ref()
        const store=useStore()
        const state=reactive({
            teacherData:[],
            updateVisible:false,
            InfoFilled,
            DeleteFilled,
            Edit,
            form:{},
        })
        onMounted(()=>{
            getList()
        })

        const getList = async()=>{
            let res = await ajax.getList({tableName:"jiaoshis"})
            console.log(res.data);
            let sub=''
            res.data.forEach((v,i) => {
                if(v.kemu==79){
                    sub='数学'
                }else if(v.kemu==99){
                    sub='语文'
                }else{
                    sub='外语'
                }
                state.teacherData.push({
                    _id:v._id,
                    id: i+1,
                    account:v.account,
                    pwd:v.paw,
                    name:v.name,
                    subject:sub,
                    grade:v.classInfo,
                    class:v.classInfo
                }
                )
            });

            console.log(state.teacherData);
            
        }
        const confirmDelelte = (id) => {
            console.log(id)

        }
        const showUpdateDialog = (row)=>{
            state.updateVisible = true;
            state.form = {...row}
        }
        const submitUpdateForm =  ()=>{
            
        }
        const updateClose = ()=>{
            state.updateVisible = false;
            state.form = {}
        }
        const mustRedio=(value)=>{
            console.log(value);
            if(value=="语文"){
                state.form.kemu=99
            }else if(value=="数学"){
                state.form.kemu=79
            }else{
                state.form.kemu=97
            }
            
            state.a=true
        }
        //选中班级
        const mustSelsct1=(val1)=>{
            console.log(val1);
            state.val1=val1
            state.b=true
        }
        //选中班级
        const mustSelsct2=(val2)=>{
            console.log(val2);
            state.val2=val2
            state.c=true
            
        }
        const options = [
                        {
                            value: '01',
                            label: '一年级',
                        },
                        {
                            value: '02',
                            label: '二年级',
                        },
                        {
                            value: '03',
                            label: '三年级',
                        },
                        {
                            value: '04',
                            label: '四年级',
                        },
                        {
                            value: '05',
                            label: '五年级',
                        },
                        {
                            value: '06',
                            label: '六年级',
                        },
                        ]
        //班级列表
        const classes=[
                        {
                            value: '01',
                            label: '(1)班',
                        },
                        {
                            value: '02',
                            label: '(2)班',
                        },
                        {
                            value: '03',
                            label: '(3)班',
                        },
                        {
                            value: '04',
                            label: '(4)班',
                        },
                        {
                            value: '05',
                            label: '(5)班',
                        },
                        {
                            value: '06',
                            label: '(6)班',
                        },
                        {
                            value: '07',
                            label: '(7)班',
                        },
                        {
                            value: '08',
                            label: '(8)班',
                        },
                        {
                            value: '09',
                            label: '(9)班',
                        },
        ]
          //重置操作
        const resetform=()=>{
            //resetFields   重置当前字段并删除验证结果。 
            myfrom.value.resetFields()
        }
        const keyword = ref('')
        const SubjectValue = ref('')
        const GradeValue = ref('')
        const SubjecOptions=[
            {
                value: 'language',
                label: '语文',
            },
            {
                value: 'math',
                label: '数学',
            },
            {
                value: 'foreign',
                label: '外语',
            },
        ]
        const GradeOptions=[
            {
                value: 'grade01',
                label: '一年级',
            },
            {
                value: 'grade02',
                label: '二年级',
            },
            {
                value: 'grade03',
                label: '三年级',
            },
            {
                value: 'grade04',
                label: '四年级',
            },
            {
                value: 'grade05',
                label: '五年级',
            },
            {
                value: 'grade06',
                label: '六年级',
            },
        ]
        return{
            ...toRefs(state),
            // eduAdminData,
            SubjecOptions,
            GradeOptions,
            SubjectValue,
            GradeValue,
            keyword,
            showUpdateDialog,
            confirmDelelte,
            submitUpdateForm,
            updateClose,
            options,
            resetform,
            classes,
            mustSelsct1,
            mustSelsct2,
            mustRedio,
            radio1,
            select1,
            select2,
            store
        }
    }
}
</script>
<style lang="scss" scoped>
.el-button{
    margin-left: 0px;
}
.acadamy02{
    .title{
        font-size: 15px;
        font-weight: bold;
    }
    .search{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        .search-input{
            width: 200px;
            display: flex;
            align-items: center;
            .input__icon{
                margin-top: 8px;
            }
        }
        .select{
            .el-select {
                margin-right: 10px;
            }
        }
    }
    .list{
        height: 100%;
    }
    
}
    
</style>